<template>
	<view class="bg" :style="{backgroundImage:'url('+imagesurl+'/images/blueBg1.png)'}">
		<view class="top">
			<view style="margin:0 auto 40rpx auto;width: 140rpx;">
				<u-image src="/static/aware_icon.png" width="140" height="60"></u-image>
			</view>

			<u-form :model="form" ref="uForm">
				<u-form-item prop="phone">
					<u-input v-model="form.phone" placeholder="请在此处输入好友的手机号" type="Number" />
				</u-form-item>

			</u-form>

		</view>


		<rule titleID="8"></rule>

		<u-button shape="circle"
			:custom-style="{background:'#FF6450',color:'#fff',marginTop:'40rpx',width:'500rpx',marginBottom:'40rpx'}"
			@click="submit">
			立即赠送</u-button>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	
	import url from '@/common/baseUrl.js';
	
	import rule from '../../components/rule.vue';
	export default {
		components: {
			rule
		},
		data() {
			return {
				imagesurl: url.imageUrl,
				form: {
					phone: "",
				},
				id: "",
				rules: {
					phone: [{
							required: true,
							message: '请填写手机号',
							trigger: ['blur', 'change']
						},
						{

							validator: (rule, value, callback) => {

								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				}

			}

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.post('/api/user/given', {
							member_tel_charge_id: this.id,
							mobile: this.form.phone
						}, {}).then(res => {


							this.$refs.uToast.show({
								title: '赠送成功',
								type: 'success',
								back:true

							})
						}).catch(err => {})

					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style>
	.bg {
	/* 	background-image: url(../../static/blueBg.png); */
		width: 100%;
		min-height: 100%;
		background-size: cover;
		display: inline-block;
	}

	.top {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 40rpx;
		margin: 40rpx auto;
	}

	.top2 {
		width: 690rpx;

		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 40rpx;
		margin: 40rpx auto;
	}

	.des {

		width: 630rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #F7F7F7;
		border-radius: 20rpx;
		text-align: center;
		font-size: 28rpx;


	}

	.dis {

		width: 630rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #FF6450;
		border-radius: 20rpx;
		display: flex;
		margin-top: 40rpx;
		justify-content: space-between;
		padding: 0 40rpx;
		color: #FFFFFF;
	}

	.row {
		display: flex;
		flex-wrap: wrap;
	}

	.btn {
		width: 160rpx;
		height: 66rpx;
		line-height: 66rpx;
		background: #F7F7F7;
		border-radius: 60rpx;
		text-align: center;
		color: #999999;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.change {
		background: #628DFF;
		color: #FFFFFF;
		opacity: 1;
		transition: all 0.3s
	}
</style>
